/**
 * @desc 赛事列表-后勤管理，新增就餐弹框
 * @author yd_zhaorongjun
 */
<template>
  <el-dialog
    class="gl_dialog_TitleLine gl_dl_footer"
    width="1000px"
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <div v-if="dialogVisible">
      <el-table v-loading="loading" :data="tableData" class="gl_table_noBorder" size="mini" style="width: 100%;" height="500px" @selection-change="selection">
        <el-table-column type="selection" label-class-name="selection" width="40" />
        <el-table-column label="饭店图片" align="center" width="70">
          <template slot-scope="{row}">
            <img class="hotelPhoto" :src="getStaticFileUrl(row.imagePath)" alt="" @error="errorPhoto" @mouseenter="showImg(...arguments, row.imagePath)" @mouseleave="hideImg(row.imagePath)">
          </template>
        </el-table-column>
        <el-table-column
          label="饭店名称"
          :tooltip="true"
          width="215"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top"
              width="400"
              trigger="hover"
              :open-delay="400"
              :content="row.name"
            >
              <div slot="reference" class="gl_ellipsis">{{ row.name }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="饭店地址"
          :tooltip="true"
          width="215"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top"
              width="400"
              trigger="hover"
              :open-delay="400"
              :content="row.address"
            >
              <div slot="reference" class="gl_ellipsis">{{ row.address }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="饭店介绍"
          :tooltip="true"
          min-width="215"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top"
              width="400"
              trigger="hover"
              :open-delay="400"
              :content="row.description"
            >
              <div slot="reference" class="gl_ellipsis">{{ row.description }}</div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <img v-if="isShowImg && getStaticFileUrl(bigImg)" class="roomBigPhoto" :style="position" :src="getStaticFileUrl(bigImg)" alt="" @error="errorPhoto">
      <!-- <el-row class="gl_pt_20" style="text-align: right;">
        <el-pagination
          :current-page="Api_GET_UnlaunchedRestaurantListQO.Page"
          :page-size="Api_GET_UnlaunchedRestaurantListQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row> -->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      <!-- 保存按钮 -->
      <el-button type="primary" :loading="submitLoading" :disabled="SelectionList.length <= 0" size="mini" @click="saveNew()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import defaultHotelImg from '@/assets/images/face_default.png';
import { Api_GET_EventsManagementRestaurantUnlaunchedRestaurantListQO } from '@/lib/form/game/swaggerForm';
import {
  api_GET_EventsManagementRestaurantUnlaunchedRestaurantList
} from '@/extend/api/gameswaggerApi/app';
export default {
  name: 'EditSchedule',
  data() {
    return {
      defaultHotelImg: defaultHotelImg,
      loading: false,
      currentPage: 1,
      totalPage: 0,
      title: '',
      Api_GET_UnlaunchedRestaurantListQO: new Api_GET_EventsManagementRestaurantUnlaunchedRestaurantListQO(),
      tableData: [],
      isShowImg: false,
      submitLoading: false,
      position: {
        left: 0,
        top: 0
      },
      dialogVisible: false,
      timeOut: '',
      SelectionList: [], // 选中的数据
      weightingType: '' // 控制显示是团体还是个人
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      dictAll: state => state.dict.dictAll
    })
  },
  created() {
    this.getDict();
    this.gameId = this.$route.params.id;
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    open(row) {
      console.log(row);
      this.title = '添加饭店';
      this.SelectionList = [];
      this.tableData = [];
      this.Api_GET_UnlaunchedRestaurantListQO = new Api_GET_EventsManagementRestaurantUnlaunchedRestaurantListQO();
      this.dialogVisible = true;
      this.refreshList();
    },
    // 刷新列表
    refreshList(page) {
      this.loading = true;
      // this.Api_GET_UnlaunchedRestaurantListQO.Page = page || 1;
      // this.Api_GET_UnlaunchedRestaurantListQO.SkipCount = (this.Api_GET_UnlaunchedRestaurantListQO.Page - 1) * this.Api_GET_UnlaunchedRestaurantListQO.MaxResultCount;
      api_GET_EventsManagementRestaurantUnlaunchedRestaurantList({ ProviderKey: this.gameId }).then(res => {
        console.log(res);
        this.tableData = res || [];
        // this.totalPage = res.totalCount;
        this.loading = false;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.loading = false;
      });
    },
    // 选中的数据
    selection(val) {
      this.SelectionList = val;
    },
    // 新增
    saveNew() {
      console.log(this.SelectionList);
      const returnData = this.SelectionList.map(item => item.id);
      console.log(returnData);
      this.submitLoading = true;
      if (returnData.length > 0) {
        this.$emit('insert', returnData);
      } else {
        this.submitLoading = false;
        return false;
      }
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    },
    showImg(event, img) {
      const _this = this;
      _this.bigImg = img;
      const _img = event.target; // 这里就是获取到的dom元素
      const _position = _img.getBoundingClientRect();
      this.timeOut = setTimeout(() => {
        _this.isShowImg = true;
        this.$set(this.position, 'left', _position.left + 60 + 'px');
        this.$set(this.position, 'top', _position.top + 'px');
      }, 300);
    },
    hideImg(img) {
      const _this = this;
      clearTimeout(this.timeOut);
      _this.isShowImg = false;
    },
    showRoomImg(event, img) {
      const _this = this;
      _this.bigImg = img;
      const _img = event.target; // 这里就是获取到的dom元素
      const _position = _img.getBoundingClientRect();
      console.log(_position);
      this.timeOut = setTimeout(() => {
        _this.isShowRoomImg = true;
        _this.$set(_this.position, 'left', _position.left + 60 + 'px');
        _this.$set(_this.position, 'top', _position.top + 'px');
      }, 300);
      console.log(this.position);
    },
    hideRoomImg() {
      const _this = this;
      clearTimeout(this.timeOut);
      _this.isShowRoomImg = false;
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_UnlaunchedRestaurantListQO.MaxResultCount = MaxResultCount;
      this.refreshList();
    },
    pageIndexChange(currentPage) {
      this.refreshList(currentPage);
    }
  }
};
</script>
<style lang="scss" scoped>
  .hotelPhoto, .roomPhoto{
    width: 48px;
    height: 36px;
    vertical-align: middle;
  }
  .hotelBigPhoto{
    width: 310px;
    height: 280px;
    position: absolute;
    z-index: 10;
    left: 70px;
  }
  .roomBigPhoto{
    width: 310px;
    height: 280px;
    position: fixed;
    z-index: 10;
  }
  .icon_color {
    color: #1682e6;
  }
  .el-input-number.is-without-controls .el-input__inner{
    padding-left: 5px;
    padding-right: 5px;
  }
</style>

